<template>
  <div style="overflow: auto;padding: 10px 15px;height: 100%" class="scrollbar-new">
    <div class="bg-white scrollbar" style="overflow: auto" v-loading="loading">

      <!-- 筛选条件 -->
      <div class="flex-space-between" style="height: 40px;padding: 0 20px">
        <div>
          <i class="el-icon-warning m-r-xs"></i>
          <span>{{ $t('loc.remAppMessage') }}</span>
        </div>
        <div>
          <el-date-picker
            v-model="param.fromDate"
            type="date"
            size="small"
            :clearable="false"
            value-format="yyyy-MM-dd"
            format="MM/dd/yyyy"
            :picker-options="{disabledDate: time => isDisabledDate(time, 'from')}">
          </el-date-picker>
          <span> {{$t('loc.toTime')}} </span>
          <el-date-picker
            v-model="param.toDate"
            type="date"
            size="small"
            :clearable="false"
            value-format="yyyy-MM-dd"
            format="MM/dd/yyyy"
            :picker-options="{disabledDate: time => isDisabledDate(time, 'to')}">
          </el-date-picker>
          <el-select size="small" :placeholder="$t('loc.qkSer')" v-model="selectOption" class="m-l">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import MessageTable from "@/views/modules/message/MessageHistory/MessageTable";

export default {
  name: 'MessageHistory',
  components: {
    // MessageTable,
  },
  data() {
    return {
      // 过滤条件
      param: {
        fromDate: this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),
        toDate: this.$moment().format('YYYY-MM-DD'),
      },
      // 可选择的日期
      options: [
        {
          value: 'Today',
          label: this.$t('loc.today')
        }, {
          value: 'LastWeek',
          label: this.$t('loc.lstWeek')
        }, {
          value: 'LastMonth',
          label: this.$t('loc.lstMonth')
        }, {
          value: 'LastQuarter',
          label: this.$t('loc.lstQt')
        }, {
          value: 'LastHalfAYear',
          label: this.$t('loc.lstHf')
        }
      ],
      // 选择的日期
      selectOption: 'LastMonth',
      // 加载中
      loading: false,
    }
  },
  watch: {
    selectOption(value) {
      this.param.toDate = this.$moment().format('YYYY-MM-DD')
      switch (value) {
        case 'Today':
          this.param.fromDate = this.$moment().format('YYYY-MM-DD');
          break;
        case 'LastWeek':
          this.param.fromDate = this.$moment().subtract(1, 'week').format('YYYY-MM-DD');
          break;
        case 'LastMonth':
          this.param.fromDate = this.$moment().subtract(1, 'month').format('YYYY-MM-DD');
          break;
        case 'LastQuarter':
          this.param.fromDate = this.$moment().subtract(1, 'quarter').format('YYYY-MM-DD');
          break;
        case 'LastHalfAYear':
          this.param.fromDate = this.$moment().subtract(0.5, 'year').format('YYYY-MM-DD');
          break;
        default:
          this.param.fromDate = '';
      }
    }
  },
  methods: {
    handleLoadingTable(loading) {
      this.loading = loading;
    },
    isDisabledDate(date, type) {
      // 当前时间以前
      let now = this.$moment().format('YYYY-MM-DD');
      date = this.$moment(date).format("YYYY-MM-DD")
      if (now < date) {
        return true;
      }
      if (type === 'from') {
        return date > this.param.toDate; // || date < this.$moment(this.param.toDate).subtract(6, 'months').format('YYYY-MM-DD')
      }
      return date < this.param.fromDate; // || date > this.$moment(this.param.fromDate).add(6, 'months').format("YYYY-MM-DD")
    }
  },
}
</script>
<style scoped lang="less">
.el-date-editor {
  width: 130px;
}
</style>